<template>
  <div>
    <van-search
      v-model.trim="value"
      shape="round"
      placeholder="请输入搜索关键词"
      @clear="clearFn"
      @input="inputFn"
    />
    <div class="search_wrap" v-if="searchList.length === 0">
      <p class="hot_title">热门搜索</p>
      <div class="hot_name_wrap">
        <span
          class="hot_item"
          v-for="(item, i) in hotList"
          :key="i"
          @click="clickFn(item.first)"
          >{{ item.first }}
        </span>
      </div>
    </div>
    <div class="search_wrap" v-else>
      <p class="hot_title">最佳匹配</p>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <!-- <van-cell
          :title="item.name"
          :label="item.ar[0].name + ' - ' + item.name"
          center
          v-for="item in searchList"
          :key="item.id"
        >
          使用 right-icon 插槽来自定义右侧图标
          <template #right-icon>
            <van-icon name="play-circle-o" size="0.6rem" />
          </template>
        </van-cell> -->
        <SongItem
          v-for="item in searchList"
          :key="item.id"
          :title="item.name"
          :label="item.ar[0].name"
          :id="item.id"
        ></SongItem>
      </van-list>
    </div>
  </div>
</template>

<script>
import SongItem from "@/components/SongItem";
import { hotList, getSearch } from "@/api";
export default {
  data() {
    return {
      value: "",
      hotList: [],
      searchList: [],
      page: 1,
      loading: false,
      finished: false,
    };
  },
  async created() {
    const { data: res } = await hotList();
    console.log(res);
    this.hotList = res.result.hots;
  },
  methods: {
    async clickFn(val) {
      // !每次点击回显输入框内容，页面回置到第一页，数据是否加载完成finished重置为false
      this.page = 1;
      this.finished = false;
      this.value = val;
      const res = await this.getSongList();
      this.searchList = res.result.songs;
    },
    async getSongList() {
      const { data: res } = await getSearch({
        keywords: this.value,
        limit: 50,
        offset: (this.page - 1) * 50,
      });
      console.log(res);
      return res;
    },
    clearFn() {
      this.searchList = [];
    },
    async onLoad() {
      this.page++;
      const res = await this.getSongList();
      // !数据加载完判断一下
      console.log(res.result.songs);
      if (res.result.songs === undefined) {
        this.finished = true;
        this.loading = false;
        // !记得return,阻止后续代码执行
        return;
      }

      this.searchList = [...this.searchList, ...res.result.songs];
      // !数据加载完之后loading设为false表示本次加载已完成
      this.loading = false;
    },
    async inputFn() {
      // todo 输入框防抖
      if (this.flag) clearTimeout(this.flag);
      this.flag = setTimeout(async () => {
        // !每次搜索，页面回置到第一页，数据是否加载完成finished重置为false
        this.page = 1;
        this.finished = false;
        if (this.value.length === 0) return;
        const res = await this.getSongList();
        // !如果没有歌曲搜索结果，考虑到这个情况做判断,此时this.searchList为undefined
        if (this.searchList === undefined) return;
        this.searchList = res.result.songs;
      }, 700);
    },
  },
  components: {
    SongItem,
  },
};
</script>

<style scoped>
/* 搜索容器的样式 */
.search_wrap {
  padding: 0.266667rem;
}

/*热门搜索文字标题样式 */
.hot_title {
  font-size: 0.32rem;
  color: #666;
}

/* 热搜词_容器 */
.hot_name_wrap {
  margin: 0.266667rem 0;
}

/* 热搜词_样式 */
.hot_item {
  display: inline-block;
  height: 0.853333rem;
  margin-right: 0.213333rem;
  margin-bottom: 0.213333rem;
  padding: 0 0.373333rem;
  font-size: 0.373333rem;
  line-height: 0.853333rem;
  color: #333;
  border-color: #d3d4da;
  border-radius: 0.853333rem;
  border: 1px solid #d3d4da;
}
</style>